<template>
	<view class="content">
		<view class="item-box">
			<view class="item-title">
				<p>领用产品</p>
				<p>个数</p>
				<p>状态</p>
			</view>
			<view class="item-message" v-for="(item,i) in data" :key="i" >
				<view class="box">
					<view class="p">
						{{item.name}}
					</view>
					<view class="p">
						{{item.product_uom_qty}}
					</view>
					<view class="p">
						{{item.status}}
					</view>
				</view>
				<view class="btn-box">
					<view class="btn" @click="lingyongBtn(item.beijian_id)">
						领用
					</view>
					<view class="btn" @click="tuihuiBtn(item.beijian_id)">
						退回
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getReceiveXiangqing,
		lingyongZhuangtai,
		lingyongTuihui
	} from '@/api/maitain.js'

	const id = ref('')
	const data = ref([])
	const _getReceiveXiangqing = () => {
		getReceiveXiangqing(id.value).then((res) => {
			console.log(res);
			data.value = res.claim_status
		})
	}

	const lingyongBtn = (id) => {
		lingyongZhuangtai(id).then((res) => {
			console.log(res);
			
			if (res.status == '已领用') {
				uni.showToast({
					title:'领用完成'
				})
				setTimeout(()=>{
					_getReceiveXiangqing()
				},500)
			} else {
				setTimeout(()=>{
					_getReceiveXiangqing()
				},500)
			}
		})
	}
	
	const tuihuiBtn = (id) => {
		lingyongTuihui(id).then((res) => {
			console.log(res);
			
			if (res.status == '已退回') {
				uni.showToast({
					title:'退回完成'
				})
				setTimeout(()=>{
					_getReceiveXiangqing()
				},500)
			} else {
				setTimeout(()=>{
					_getReceiveXiangqing()
				},500)
			}
		})
	}
	

	onLoad((res) => {
		id.value = res.id
		_getReceiveXiangqing(res.id)
	})
</script>

<style scoped lang="scss">
	.content {
		padding: 10rpx;

		.item-box {
			.item-title {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				border-bottom: 1rpx solid gainsboro;
				display: grid;
			}

			.item-message {
				padding: 10rpx 0;
				grid-template-columns: repeat(3, 1fr);

				.box {
					display: grid;
					gap: 4rpx;
					grid-template-columns: repeat(3, 1fr);
				}

				.btn-box {
					display: flex;
					gap: 4rpx;
					border-bottom: 1rpx solid gainsboro;
					justify-content: space-around;
					margin-top: 10rpx;

					.btn {
						color: white;
						padding: 10rpx 70rpx;
						background-color: #337ecc;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>